<template>
  <el-dialog
    title="选择优惠券"
    :visible.sync="dialogVisible"
    @close="dialogFormVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <!--内容-->
    <div class="product-content">
      <div class="table-wrap">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
          @selection-change="tableCurrentChange"
        >
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column
            prop="coupon_type"
            label="优惠券类型"
            width="100"
          ></el-table-column>
          <el-table-column label="优惠方式">
            <template slot-scope="scope">
              <div v-if="scope.row.coupon_type.value != 20">
                <span
                  ><strong class="orange">{{ scope.row.reduce_price }}</strong>
                  元</span
                >
              </div>
              <div v-if="scope.row.coupon_type.value == 20">
                <span
                  ><strong class="orange">{{ scope.row.discount }}</strong>
                  折</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="min_price" label="最低消费">
            <template slot-scope="scope">
              <div v-if="scope.row.coupon_type.value != 40">
                <span>{{ scope.row.min_price }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="total_num" label="数量">
            <template slot-scope="scope">
              <span v-if="scope.row.total_num > 0">{{
                scope.row.total_num
              }}</span>
              <span v-else>无限制</span>
            </template>
          </el-table-column>
          <el-table-column type="selection" :selectable="selectableFunc" width="44" v-if="islist"></el-table-column>
          <el-table-column width="80" label="单选" v-if="!islist">
            <template slot-scope="scope">
              <el-button size="mini" v-if="scope.row.noChoose" @click="SingleFunc(scope.row)">选择</el-button>
              <el-button size="mini" v-else disabled>已选</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--分页-->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          background
          :current-page="curPage"
          :page-sizes="[2, 10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalDataNumber"
        ></el-pagination>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible=false">取 消</el-button>
      <el-button size="small" type="primary" @click="addClerk" v-if="islist">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import CouponApi from "@/api/coupon.js";
export default {
  data() {
    return {
      /*是否加载完成*/
      loading: true,
      /*当前是第几页*/
      curPage: 1,
      /*一页多少条*/
      pageSize: 20,
      /*一共多少条数据*/
      totalDataNumber: 0,
      formInline: {
        name: ""
      },
      //会员列表
      tableData: [],
      formRules: {
        name: [
          {
            required: true,
            message: "请输入等级名称",
            trigger: "blur"
          },
          {
            min: 3,
            max: 5,
            message: "长度在 3 到 5 个字符",
            trigger: "blur"
          }
        ]
      },
      multipleSelection: [],
      /*左边长度*/
      formLabelWidth: "120px",
      /*是否显示*/
      dialogVisible: false
    };
  },
  props: ['open_add', 'excludeIds','islist'],
  created() {
    this.dialogVisible = this.open_add;
    /*获取列表*/
    this.getTableList();
  },
  methods: {
    /*是否可以勾选*/
    selectableFunc(e){
      if(typeof e.noChoose !=='boolean'){
        return true;
      }
      return e.noChoose;
    },

    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getTableList();
    },
    getTableList() {
      let self = this;
      let params = {};
      params.page = self.curPage;
      params.list_rows = self.pageSize;
      CouponApi.couponList(params, true)
        .then(data => {
          if (data.code == 1) {
            self.loading = false;
            /*判断是否需要去重*/
            if(self.excludeIds&&typeof(self.excludeIds)!='undefined'&&self.excludeIds.length>0){
              data.data.list.data.forEach(item=>{
                if(self.excludeIds.indexOf(item.coupon_id)>-1){
                  item.noChoose=false;
                }else{
                  item.noChoose=true;
                }
              });
            }else{
              if(!self.islist){
                 data.data.list.data.forEach(item=>{
                   item.noChoose=true;
                 });
              }
            }
            self.tableData = data.data.list.data;
            self.totalDataNumber = data.data.list.total;
            self.gradeList = data.data.grade;
          } else {
            self.$message.error("错了哦，这是一条错误消息");
          }
        })
        .catch(error => {});
    },

    //点击确定
    selectUser(e) {
      let self = this;
      let params = e;
      this.$emit("closeDialog", {
        type: "success",
        openDialog: false,
        params: params
      });
    },

    /*关闭弹窗*/
    dialogFormVisible() {
      this.$emit('closeDialog', {
        type: this.type,
        openDialog: false,
        params: this.params
      });
    },

    /*单选*/
    SingleFunc(row){
      this.multipleSelection=[row];
      this.addClerk();
    },

    //点击确定
    addClerk() {
      let self = this;
      let params = null;
      let type = 'success';
      if (self.multipleSelection.length < 1) {
        self.$message({
          message: '请至少选择一张优惠券！',
          type: 'error'
        });
        return;
      }
      if (self.islist&&typeof(self.islist)!='undefined') {
        params = self.multipleSelection;
      } else {
        params = self.multipleSelection[0];
      }
      self.params=params;
      self.type='success';
      self.dialogVisible=false;
    },

    /*监听复选按钮选中事件*/
    tableCurrentChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style></style>
